<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>{$data.page_title}</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/aui.css"/>
	<link rel="stylesheet" href="css/alert.css" />
	<script src="js/jquery-1.8.2.min.js"></script>

	<script>
		autoload=function(){
			var data={};
			data.user_id=user_id
			$.ajax({
				type: "POST",
				//url: "http://test/jsonp.php",
				data: data,
				url: "http://xjh.taoleyizhan.com/wap/index.php?ctl=mainpage&show_prog=1",
				dataType: "json",
				success: function (json) {
					console.log(json)
					page_data=json
					$("#page_title").text(page_data.page_title)
					$("#user_name").text(page_data.user_name)
					$("#user_id").text("ID:("+page_data.id+")")
					$("#user_logo").attr("src",page_data.user_avatar)
					$("#user_dw_name").text(page_data.user_dw_name)
					$("#user_focused_count").text(page_data.user_focused_count)
					$("#user_user_xingyun").text(page_data.user_xingyun)
					$("#user_score").text(page_data.user_score)
					$("#user_money_int").text(page_data.user_money_int)
					$("#user_xingyun").text(page_data.user_xingyun)
				},
				error:function(json){
					console.log(json);
				}
			});
		}

	</script>
	<script src="js/init.js"></script>
</head>


<body>
<header class="mui-bar mui-bar-nav ">
	<a href="index.php" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title" id="page_title">{$data.page_title}</h1>

</header>


<footer class='mui-bar mui-bar-footer mui-row'>
	<div class="mui-col-sm-4 mui-col-xs-4 mui-text-center">
		<a href="/index.html"}"><img class="aui-col-3" src="image/index_shangcheng.png" alt="" /></a>
		<p>商城</p>
	</div>
	<div class="mui-col-sm-4 mui-col-xs-4 mui-text-center">
		<a href="{url r="index" b="mainpage#index"}"><img class="aui-col-4 re rebom" src="image/index_game.png" alt="" /></a>
		<p class="re rebom">游戏</p>
	</div>
	<div class="mui-col-sm-4 mui-col-xs-4 mui-text-center">
		<a href="{url r="index" b="uc_msg#index"}"><img class="aui-col-3" src="image/index_chuanshu.png" alt="" /></a>
		<p>传书</p>
	</div>
</footer>

		<div class="mui-content ab" id="refreshContainer">
			<!--用户信息部分-->
			<!--<?
			//print_r($_COOKIE);
			$user_login_status =check_save_login();
			if($user_login_status==LOGIN_STATUS_LOGINED):
			?>-->
			<div class="mui-row " style="padding: 20px 0 0 0 ;background-image: linear-gradient(0deg, #3699c3 0%, #0976e5 100%);">
				<div class="mui-col-sm-3 mui-col-xs-3 mui-text-center">
					<img id="user_logo" class="aui-col-5" src="{$data.user_logo}" alt="" onclick="location.href='index.php?ctl=user_center'" />
					<h6 class="aui-color-white  hidden aui-hidden aui-mar-auto" style="width: 51%;" id="user_name">{$data.user_name}</h6>
					<h6 class="aui-color-white" id="user_id">ID:{$data.id}</h6>

				</div>
				<div class="mui-col-sm-9 mui-col-xs-9 ">
					
					<div class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6">
							<h5 class="aui-color-white">段位:&nbsp;<span id="user_dw_name">{$data.user_dw_name}<span></h5>
							<h5 class="aui-color-white">人气:&nbsp;<span id="user_focused_count">{$data.user_focused_count}<span></h5>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<h5 class="aui-color-white">胜率:&nbsp;100%</h5>
							<h5 class="aui-color-white">运气:&nbsp;<span id="user_xingyun">{$data.user_xingyun}</span></h5>
						</div>
					</div>

					
				</div>
			</div>

			<div class="aui-background-deepblue hidden">
				<img src="" alt="" />
				<h5 class="fl aui-color-white aui-pad-r-10"><img class="vmid aui-pad-r-5"src="image/jiu.png" alt="" width="26"/>酒水数量:&nbsp;<span id="user_score">{$data.user_score}</span>ML</h5>
				<h5 class="fl aui-color-white"><img class="vmid aui-pad-r-5"src="image/index_jifen.png" alt="" width="26"/>积分:<span id="user_money_int">{$data.user_money_int}</span></h5>
				<h5 class="fr aui-color-white">购买-></h5>
			</div>
			<?
			endif;
			?>
			<!--end 用户信息部分-->
			
			<div class="mui-row aui-mar-t-5">
				<div class="mui-col-sm-4 mui-col-xs-4 mui-text-center ">
					<img class="aui-col-8" style="border-right:1px solid #000;padding-right: 20px ;" src="image/index_jiebao.png" alt="" />
				</div>
				<div class="mui-col-sm-8 mui-col-xs-8 " id="lunbo_content">
					<div class="hidden " style="height: 32px;">
						<div class="re hidden" id="lunbo" style="top: 1px;">
		    			{if $data.newest_lottery_list}
						{foreach from=$data.newest_lottery_list item=lottery_unit}
						<p class="aui-color-red ">&nbsp;恭喜&nbsp;{$lottery_unit.user_name}&nbsp;获得{$lottery_unit.name}&nbsp;</p>
						{/foreach}
						{/if}
						</div>
					</div>
				</div>

				
			</div>
					
			<!--用户酒水数量-->
			

			<div class="mui-row aui-mar-t-5">
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=mainpage&act=active"><img class="aui-col-8" src="image/index_active.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=rank&act=rank_dw"><img class="aui-col-8" src="image/index_ph.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=mainpage&act=vip"><img class="aui-col-8" src="image/index_hy.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=user_center"><img class="aui-col-8" src="image/index_back.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=mainpage&act=gongxun_tm"><img class="aui-col-8" src="image/index_fuli.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-2 mui-col-xs-2 mui-text-center">
					<a href="index.php?ctl=uc_setting"><img class="aui-col-8" src="image/index_set.png" alt="" /></a>
				</div>
			</div>
			<!--头部导航栏-->
			
			
			<div class="mui-row aui-mar-t-5">
				<div id="chuangjianleitai" class="mui-col-sm-6 mui-col-xs-6 mui-text-center">
					<a href="#"><img class="aui-col-9" src="image/index_chuangjian.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center search zhujiu"  onclick="go(1)">
					<a href="#"><img class="aui-col-9" src="image/index_sousuo.png" alt="" /></a>
				</div>
			</div>
			<!--擂台-->
			

			<div class="mui-text-center re">
				<a href="index.php?ctl=baozangclone&act=shengya#{$data.user_dw}"><img class="aui-col-96" src="image/index_zhujiu.png" alt="" /></a>
				
			</div>
			<div class="mui-text-center re">
				<a href="index.php?ctl=baozang&act=index"><img class="aui-col-96" src="image/index_baozang.png" alt="" /></a>
			</div>
			<div class="mui-text-center re">
				<a href="index.php?ctl=baozangclone&act=mengxiang"><img class="aui-col-96" src="image/index_mengxiang.png" alt="" /></a>
			</div>
			<!--玩法-->
			
			
			<div class="mui-row ">
				<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center">
					<a href="index.php?ctl=baozangclone&act=daleijilu"><img class="aui-col-10 re rele" src="image/index_dalei.png" alt="" /></a>
				</div>
				<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center">
					<a href="index.php?ctl=helps"><img class="aui-col-10 re reri" src="image/index_xinshou.png" alt="" /></a>
				</div>
			</div>
			<!--打擂，冒险记录-->
			

			<div class="alert-lg fix retop mui-text-center">
				<div id="set" class="ab  aui-col-9 alert-lg-blue mui-text-center">
					<h1 class="aui-color-white"><strong>创建房间-煮酒论英雄</strong></h1>
					<div class="ab aui-col-9 aui-background-white alert-lg-white mui-text-left">
						
						<h2 class=" re rele aui-mar-t-15"><strong>游戏模式</strong></h2>
						<div id="moshi" class="aui-col-9 re alert_xiala ">
							<span>独闯江湖</span><img class="  fr" src="image/xiala.png" alt="" />
							<ul class="ab  alert_xiala_deepblue">
								<li class="aui-col-10 alert_xiala_qianblue ">独闯江湖</li>
								<!--li class="aui-col-10 ">拉帮结派</li-->
							</ul>
						</div>
						<h2 class=" re rele aui-mar-t-15"><strong>选择人数</strong></h2>
						<div id="sanjiu" class="aui-col-9 re alert_xiala ">
							<span id="game_num">2</span>人<img class="  fr" src="image/xiala.png" alt="" />
							<ul class="ab  alert_xiala_deepblue">
								<li class="aui-col-10 alert_xiala_qianblue ">2</li>
								<li class="aui-col-10 ">4</li>
								<li class="aui-col-10 ">8</li>
								<li class="aui-col-10 ">16</li>
							</ul>
						</div>

					</div>
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="go(0)"><a href="#">确定</a></button>
						</div>
					</div>
				</div>
				<!--创建房间 弹窗-->
	
				<div id="zhujiu" class="ab  aui-col-9 alert-lg-blue mui-text-center index-blue">
					<h1 class="aui-color-white"><strong>快速匹配-煮酒论英雄</strong></h1>
					<div class="re aui-col-9 aui-background-white alert-lg-white mui-text-center index-white">
						<img class="aui-col-2 aui-mar-t-20" src="images/pp_donghua.gif" alt="">
						<h2><strong>正在匹配...</strong> <img class="aui-col-1" src="images/shuaxin.gif" alt=""> </h2>
					</div>
					<h1 class="aui-color-white">满 <span id="numtxt2">4</span> 人开赛</h1>
					<h1 class="aui-color-white">已报名 <span id="bm_num">null</span> 人，还差 <span id="cha_num">null</span> 人</h1>
					<div class="quxiao mui-row  aui-col-10">
						<div class="quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-6 aui-border-radius-30"  onclick="close_ws()">取消</button>
						</div>
					</div>
				</div>
				<!--煮酒论英雄弹窗-->

			</div>

		</div>
<input type="hidden" value="100" id="buy_jiuliang" />
<input type="hidden" value="666666" id="deal_id" />
<input type="hidden" value="1" id="isTrue" />
<script>
function go(type){//0创建房间 1快速匹配
	console.log('点击成功！')
	if($("#buy_jiuliang").val()*1>page_data.user_score){
		alert('酒量不足，无法开始游戏');
	}else{
		var isTrue = $("#isTrue").val();
		console.log('点击成功！-3')
		var deal_id=$("#deal_id").val();
		if(isTrue=="1") {
			if(type==0){
				var game_num=$("#game_num").html();
				//跳转到监听创建房间玩家信息
				$("#isTrue").val("0");
				var join_group_cj='cj'+deal_id+"-"+game_num+"-"+page_data.id;
				window.location.href='index.php?ctl=game&act=join&group_name='+join_group_cj+'&deal_id='+deal_id+'&game_num='+game_num;
			}else{
				var game_num=$("#numtxt2").html();
				//监听快速匹配玩家信息
				var join_group=deal_id+"-"+game_num+"-"+page_data.id;
				init(join_group);
			}
		}

	}
}
</script>
<script>
var ws;
function init(join_group) {
	var host = "ws://47.104.8.67:8282";
	try {
		ws = new WebSocket(host);
		ws.onopen = function(){
			console.log('连接成功!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
			ws.send("login:"+page_data.id);
			console.log('发送登陆数据完毕');
			ws.send("join_group:"+join_group);//join_group:deal_id-game_num-userid
			console.log('join_group通知完毕');
		};
		ws.onmessage = function (e) {
			//快速匹配监听 join_group-2
			if(e.data.indexOf("join_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听退出事件 out_group-2
			if(e.data.indexOf("out_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听人满开车
			if(e.data.indexOf("group_ok")>=0){
				var n=e.data.split("-");
				var oneuser=n[1].split(",");
				if(oneuser[0]==page_data.id){
					var deal_id =$("#deal_id").val();
					var game_num=$("#numtxt2").html();
					$.ajax({
						url: 'index.php?ctl=baozang&act=goumai2',
						type: 'POST',
						data: 'deal_id=' + deal_id + '&game_num=' + game_num + '&type=1&uids=' + n[1] +'&t=' + Math.random(),
						dataType: "json",
						success: function (data) {
							console.log(data);
							if(data.status=="1"){
								ws.send("doing:"+deal_id+"-"+game_num+"-"+data.deal_id);//发车成功 doing:deal_id-game_num-deal_id
							}else{
								alert(data.info);
							}
						},
						error: function () {
							//alert("系统错误，请联系管理员");
						}
					});				
				}
			}
			//监听发车成功
			if(e.data.indexOf("doing")>=0){
				var n=e.data.split("-");
				window.location.href='index.php?ctl=game&act=doing&deal_id='+n[1];
			}
			console.log('监听消息:'+e.data);
		};
		ws.onclose = function (msg) {
			console.log('关闭连接');
		};
	}
	catch (ex) {
		console.log(ex);
	}
}

function send(msg) {
	try { 
		ws.send(msg); 
	} catch (ex) { 
		console.log(ex);
	}
}
//刷新或关闭
window.onbeforeunload = function () {
	try {
		//监听异常退出事件
		var game_num=$("#numtxt2").html();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
};
//手动关闭
function close_ws(){
	try {
		//监听点击取消事件
		var game_num=$("#numtxt2").html();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
}
</script>		
<script src="js/index_alert.js"></script>
<script src="js/lunbo.js"></script>



